import * as echarts from "echarts";
import React, { useEffect, useRef } from "react";

const data = [
  {
    name: "server",
    x: 400,
    y: 400,
    value: [400, 200],
    fixed: true,
    symbol:
      "image://",
    symbolSize: [150, 80],
    label: {
      color: "#FFF",
      position: "bottom"
    },
    category: 1,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#157eff"
          },
          {
            offset: 1,
            color: "#35c2ff"
          }
        ])
      }
    }
  },

  {
    name: "mysql",
    x: 400,
    y: 400,
    value: [300, 50],

    fixed: true,
    symbol:
      "image://",
    symbolSize: [150, 80],
    label: {
      color: "#FFF",
      position: "bottom"
    },
    category: 1,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#157eff"
          },
          {
            offset: 1,
            color: "#35c2ff"
          }
        ])
      }
    }
  },
  {
    name: "redis",
    x: 400,
    y: 400,
    value: [500, 50],

    fixed: true,
    symbol:
      "image://",
    symbolSize: [120, 80],
    label: {
      color: "#FFF",
      position: "bottom"
    },
    category: 1,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#157eff"
          },
          {
            offset: 1,
            color: "#35c2ff"
          }
        ])
      }
    }
  },
  {
    name: "web",
    symbol:
      "image://",
    symbolSize: [60, 30],
    label: {
      color: "#efefef",
      position: "bottom"
    },
    value: [100, 400],

    x: 200,
    y: 500,
    fixed: true,
    category: 1,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#ffb402"
          },
          {
            offset: 1,
            color: "#ffdc84"
          }
        ])
      }
    }
  },
  {
    name: "iOS",
    symbol:
      "image://",
    symbolSize: [60, 30],
    label: {
      color: "#efefef",
      position: "bottom"
    },
    value: [200, 400],

    x: 200,
    y: 500,
    fixed: true,
    category: 1,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#ffb402"
          },
          {
            offset: 1,
            color: "#ffdc84"
          }
        ])
      }
    }
  },
  {
    name: "Android",
    symbol:
      "image://",
    symbolSize: [60, 30],
    label: {
      color: "#efefef",
      position: "bottom"
    },
    value: [300, 400],

    x: 200,
    y: 500,
    fixed: true,
    category: 1,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#ffb402"
          },
          {
            offset: 1,
            color: "#ffdc84"
          }
        ])
      }
    }
  },
  {
    name: "Mini Program",
    symbol:
      "image://",
    symbolSize: [60, 30],
    label: {
      color: "#efefef",
      position: "bottom"
    },
    value: [400, 400],

    x: 200,
    y: 500,
    fixed: true,
    category: 1,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#ffb402"
          },
          {
            offset: 1,
            color: "#ffdc84"
          }
        ])
      }
    }
  },
  {
    name: "raspberry",
    symbol:
      "image://",
    symbolSize: [60, 30],
    label: {
      color: "#efefef",
      position: "bottom"
    },
    value: [500, 400],

    x: 200,
    y: 500,
    fixed: true,
    category: 1,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#ffb402"
          },
          {
            offset: 1,
            color: "#ffdc84"
          }
        ])
      }
    }
  },
  {
    name: "TV",
    symbol:
      "image://",
    symbolSize: [60, 30],
    label: {
      color: "#efefef",
      position: "bottom"
    },
    value: [600, 400],

    x: 200,
    y: 500,
    fixed: true,
    category: 1,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#ffb402"
          },
          {
            offset: 1,
            color: "#ffdc84"
          }
        ])
      }
    }
  }
];

const ServerStatusChart = ({ dataSource = [] }) => {
  const ref = useRef();

  useEffect(() => {
    const myChart = echarts.init(ref.current);
    myChart.setOption({
      backgroundColor: "#000",
      xAxis: {
        show: false,
        type: "value"
      },
      yAxis: {
        show: false,
        type: "value"
      },
      grid: {
        left: 0,
        top: 30,
        bottom: 30
      },
      tooltip: {},
      series: [
        {
          type: "graph",
          zlevel: 5,
          draggable: false,
          coordinateSystem: "cartesian2d", // 使用二维的直角坐标系（也称笛卡尔坐标系）
          symbol: "rect",
          symbolOffset: ["15%", 0],
          label: {
            normal: {
              show: true
            }
          },
          data: data,
          links: [
            {
              source: "web",
              target: "server"
            },
            {
              source: "iOS",
              target: "server"
            },
            {
              source: "Android",
              target: "server"
            },
            {
              source: "Mini Program",
              target: "server"
            },
            {
              source: "raspberry",
              target: "server",
              lineStyle: {
                normal: {
                  color: "red",
                  curveness: 0.3
                }
              }
            },
            {
              source: "TV",
              target: "server"
            },
            {
              source: "业务数据7",
              target: "server"
            },
            {
              source: "server",
              target: "mysql",
              lineStyle: {
                normal: {
                  curveness: -0.3
                }
              }
            },
            {
              source: "server",
              target: "redis",
              lineStyle: {
                normal: {
                  curveness: -0.3
                }
              }
            }
          ],
          /** 设置服务器件的连线样式*/
          lineStyle: {
            normal: {
              opacity: 1,
              color: "#53B5EA",
              curveness: 0.3,
              width: 2
            }
          }
        },
        /** 分发点*/
        {
          type: "lines",
          coordinateSystem: "cartesian2d",
          z: 1,
          zlevel: 2,
          animation: false,
          effect: {
            show: true,
            period: 5,
            trailLength: 0.01,
            symbolSize: 12,
            symbol: "pin",
            loop: true,
            color: "rgba(55,155,255,0.5)"
          },
          lineStyle: {
            normal: {
              color: "#22AC38",
              width: 0,
              curveness: 0.3
            }
          },
          data: [
            {
              coords: [
                [100, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [200, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [300, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [400, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [600, 400],
                [400, 200]
              ]
            }
            // {
            //     coords: [
            //         [700, 350],
            //         [400, 200],
            //     ],
            // },
            // {
            //     coords: [
            //         [700, 300],
            //         [400, 200],
            //     ],
            // },
            // {
            //     coords: [
            //         [700, 350],
            //         [400, 200],
            //     ],
            // },
            // {
            //     coords: [
            //         [700, 300],
            //         [400, 200],
            //     ],
            // },
          ]
        },
        {
          type: "lines",
          coordinateSystem: "cartesian2d",
          z: 1,
          zlevel: 2,
          animation: false,
          effect: {
            show: true,
            period: 4,
            trailLength: 0.01,
            symbolSize: 12,
            symbol: "pin",
            loop: true,
            color: "rgba(55,155,255,0.5)"
          },
          lineStyle: {
            normal: {
              color: "#22AC38",
              width: 0,
              curveness: 0.3
            }
          },
          data: [
            {
              coords: [
                [100, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [200, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [300, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [400, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [600, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [300, 50],
                [400, 200]
              ]
            },
            {
              coords: [
                [500, 50],
                [400, 200]
              ]
            }
          ]
        },
        {
          type: "lines",
          coordinateSystem: "cartesian2d",
          z: 1,
          zlevel: 2,
          animation: false,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.01,
            symbolSize: 12,
            symbol: "pin",
            loop: true,
            color: "rgba(55,155,255,0.5)"
          },
          lineStyle: {
            normal: {
              color: "#22AC38",
              width: 0,
              curveness: 0.3
            }
          },
          data: [
            {
              coords: [
                [100, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [200, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [300, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [400, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [600, 400],
                [400, 200]
              ]
            },
            {
              coords: [
                [300, 50],
                [400, 200]
              ]
            },
            {
              coords: [
                [500, 50],
                [400, 200]
              ]
            }
            // {
            //     coords: [
            //         [700, 350],
            //         [400, 200],
            //     ],
            // },
            // {
            //     coords: [
            //         [700, 300],
            //         [400, 200],
            //     ],
            // },
          ]
        },
        {
          type: "lines",
          coordinateSystem: "cartesian2d",
          z: 1,
          zlevel: 2,
          animation: false,
          effect: {
            show: true,
            period: 3,
            trailLength: 0.01,
            symbolSize: 14,
            symbol: "pin",
            loop: true,
            color: "red"
          },
          lineStyle: {
            normal: {
              color: "#22AC38",
              width: 0,
              curveness: 0.3
            }
          },
          data: [
            {
              coords: [
                [500, 400],
                [400, 200]
              ]
            }
          ]
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    return () => {
      myChart.dispose && myChart.dispose();
    };
  }, [dataSource]);

  return <div ref={ref} style={{ height: 400, margin: 0 }}></div>;
};

export default ServerStatusChart;
